<template>
  <BasicModal
    :visible="visible"
    title="拓扑节点"
    width="600px"
    :min-height="340"
    :height="340"
    :show-ok-btn="true"
    :show-cancel-btn="true"
    :loading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div style="float: right; margin-bottom: 10px">
      <a-button type="primary" @click="handleSelect">选择节点</a-button>
    </div>
    <div style="margin-top: 10px">
      <a-table
        :columns="columns"
        :data-source="tableData"
        size="small"
        :pagination="{ pageSize: 5 }"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a style="color: red" @click="handleDelete(record)">删除</a>
          </template>
        </template>
      </a-table>
    </div>
  </BasicModal>

  <div v-if="showSelect">
    <TopoNodeSelectModal
      :visible="showSelect"
      :topo-view="topoData.id"
      @ok="onSelectOk"
      @cancel="onSelectCancel"
    />
  </div>
</template>

<script>
  import { Button, Table, message } from 'ant-design-vue'
  import TopoNodeSelectModal from './TopoNodeSelectModal.vue'
  import { BasicModal } from '/@/components/Modal'
  import { updateTopoModule, getTopoModuleList } from '/@/api/module/topoModule'

  export default {
    components: {
      'a-table': Table,
      'a-button': Button,
      BasicModal,
      TopoNodeSelectModal,
    },
    props: {
      topoData: Object,
      visible: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['ok', 'cancel'],
    data: function () {
      return {
        showSelect: false,
        tableData: [],
        loading: false,
        columns: [
          {
            title: 'ID',
            key: 'id',
            dataIndex: 'id',
            align: 'center',
          },
          {
            title: 'Name',
            key: 'name',
            dataIndex: 'name',
            align: 'center',
          },
          {
            title: 'Description',
            key: 'desc',
            dataIndex: 'desc',
            align: 'center',
          },
          {
            title: 'Parent',
            key: 'parent',
            dataIndex: 'parent',
            align: 'center',
          },
        ],
      }
    },
    mounted() {
      this.loading = true
      this.tryGetTopoModuleList()
    },
    methods: {
      handleCancel() {
        this.$emit('cancel')
      },
      handleOk() {
        this.$emit('ok', this.topoData)
      },
      handleSelect() {
        this.showSelect = true
      },
      tryGetTopoModuleList() {
        getTopoModuleList({ view: this.topoData.id })
          .then((data) => {
            this.tableData = data.modules
            this.loading = false
          })
          .catch(() => {
            message.error('get topo module list failed')
            this.loading = false
          })
      },
      tryUpdateTopoModule(data) {
        updateTopoModule({
          topoViewID: this.topoData.id,
          modules: data.checked,
        })
          .then(() => {
            this.tryGetTopoModuleList()
            this.loading = false
          })
          .catch(() => {
            message.error('update topo module failed')
            this.loading = false
          })
      },
      onSelectOk(data) {
        this.loading = true
        this.tryUpdateTopoModule(data)
        this.showSelect = false
      },
      onSelectCancel() {
        this.showSelect = false
      },
    },
  }
</script>
